<template>
	<div class="tolocation">
	<div class="tolo">
			<div class="dizhi">
				<span>北京</span>
				<div class="beg">
					我的位置
					<div class="di">
			
					</div>
				</div>
			</div>
			
			<div class="shijian">
				<div class="top">
					<span>今天中午入住</span>
					<div>02月09日</div>
					<span>周四</span>
				</div>
				<div class="gang"></div>
				<div class="bottom">
					<span>明天离店</span>
					<div>02月10日</div>
					<span>周五</span>
				</div>
				<span class="lasts">共一晚</span>
			</div>
			
			<div class="off">
				<span>酒店/地标/关键词</span>
				<img :src="img" alt="">&nbsp;
			</div>
			
			<div class="su">
				<van-search placeholder="搜索酒店" input-align="center" />
			</div>
			
			<div class="la">
				<span class="last">
				</span>
				<span> 海量酒店</span>
				<span> 先住后付</span>
			</div>
	</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			img:"https://img.alicdn.com/imgextra/i2/O1CN01wXchTL1TIvTbfZyib_!!6000000002360-2-tps-174-76.png",
		}
	}
}
</script>

<style scoped>
.tolocation{
	height: 5rem;
	padding: 0 .15rem  0 .15rem;
	border-bottom: 1px solid transparent;
	
	
}
.tolo{
	border-radius: .4rem;
background-color: white;
}
.dizhi{
	height: 1rem;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(249, 247, 247, 0.018);
}
.dizhi :nth-child(1){
	display: block;
	font-size: 18px;
	font-weight: 500;
	line-height: 1rem;
	margin-left: .3rem;
}
.di{
background-image: url('');
	background-size: contain;
	background-position: 50%;
	width: .4rem;
	height: .4rem;
position: relative;
top: -0.8rem;
left: .1rem;
}
.beg{
			color: #00a2ff;
			font-size: 14px;
			margin-top: .55rem;
			margin-right: .35rem;
}
.shijian{
	display: flex;
	justify-content: space-between;
	height: 1.3rem;
	border-bottom: 1px solid rgba(182, 180, 180, 0.377);
}
.gang{
	width: 22px;
	height: 40px;
	margin-left: -0.4rem;
	border-bottom: 1px solid rgb(182, 181, 181);
}
.top :nth-child(1){
	color: red;
	margin-left: .35rem;
	position: relative;
	top: .25rem;
}
.top :nth-child(2){
	margin-left: .33rem;
	position: relative;
		top: .25rem;
		font-size: 18px;
		font-weight: 700;
}
.top :nth-child(3){
	margin-left: 1.85rem;
	position: relative;
	top: -0.1rem;
	color: #919499;
}
.bottom :nth-child(1){
	color: red;
	margin-left: .35rem;
	position: relative;
	top: .25rem;
}
.bottom :nth-child(2){
	margin-left: .33rem;
	position: relative;
		top: .25rem;
		font-size: 18px;
		font-weight: 700;
}
.bottom{
	margin-left: -0.8rem;
}
.bottom :nth-child(3){
	margin-left: 1.85rem;
	position: relative;
	top: -0.1rem;
	color: #919499;
}
.lasts{
	margin-right: .4rem;
	position: relative;
	top: .68rem;
	color: #919499;
}

.off{
	height: .78rem;
	border-bottom: 1px solid rgba(182, 180, 180, 0.377);
}
.off span{
	position: relative;
		top: .2rem;
margin-left: .3rem;
font-size: 14px;
		color: #abaeb3;
}
.off img{
	width: 1.98rem;
	height: .8rem;
	margin-left: 5rem;
	margin-top: -0.35rem;
}
/*   van-search__content--square   */
::v-deep .van-search__content{
	background-color: yellow;
	
}
/* ::v-deep .van-search{
color: black !important;
z-index: 999;
} */
::v-deep .van-field__left-icon {
display: none;
}
::v-deep .van-search{
width: 7.1rem;
margin-left: .05rem;
z-index: 999;
}
::v-deep .van-search__content{
			border-radius: .4rem;
			padding:0 10px 0 10px ;
}
.la{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
.last{
	display: block;
	width: 2.6rem;
	height: .42rem;
margin-top: .13rem;
margin-left: .72rem;
    background-image: url('https://img.alicdn.com/imgextra/i4/O1CN01HY3GEi1uS544hGlZs_!!6000000006035-2-tps-387-63.png');
		background-size: 100% 100%;
}
.la :nth-child(2){
	margin-left: 3.6rem;
	position: relative;
	top: -18px;
}
.la :nth-child(3){
	position: relative;
	top: -18px;
	left: .1rem;
}
</style>